<template>
    <div id="home">
        <router-view :key="$route.fullPath" />
        <van-tabbar v-model="active" active-color="#F73637" inactive-color="#4E5969" route v-if="$route.meta.showTab">
            <van-tabbar-item replace to="/index">
                <span>首页</span>
                <template slot="icon">
                    <img
                        v-show="active == 0"
                        src="@/assets/icon/home_selected_big.png"
                    />
                    <img v-show="active != 0" src="@/assets/icon/home_unselected_big.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/share">
                <span>分享</span>
                <template slot="icon">
                    <img
                        v-show="active == 1"
                        src="@/assets/icon/card_selected_big.png"
                    />
                    <img
                        v-show="active != 1"
                        src="@/assets/icon/card_unselected_big.png"
                    />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/mine">
                <span>我的</span>
                <template slot="icon">
                    <img
                        v-show="active == 2"
                        src="@/assets/icon/mine_selected_big.png"
                    />
                    <img
                        v-show="active != 2"
                        src="@/assets/icon/mine_unselected_big.png"
                    />
                </template>
            </van-tabbar-item>
        </van-tabbar>
        <div class="bottom"  v-if="$route.meta.showTab"></div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                active: 0,
            }
        },
        methods: {
            getPath(path) {
                if (path === '/share') {
                    this.active = 1; // 如果是 trading 页面，则选中对应的 tab
                } else if (path === '/mine') {
                    this.active = 2; // 如果是 mine 页面，则选中对应的 tab
                } else if (path === '/index') {
                    this.active = 0;
                }
            },
        },
        watch: {
            '$route'(to, from) {
                const path = to.path;
                this.getPath(path)
            }
        },
        created() {
            let path = this.$route.path
            this.getPath(path)
        }
    }
</script>
<style lang="scss" scoped>
    .bottom {
        height: 50px;
    }
    .van-tabbar {
        z-index: 999;
    }
</style>
